<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="选择病情资料"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    
    <!-- 病情资料列表 -->
    <view class="medical-record-list">
      <view 
        v-for="record in medicalRecords" 
        :key="record.id"
        class="medical-record-card"
      >
        <!-- 患者信息 -->
        <view class="patient-info">
          <view class="avatar">
            <van-icon name="user-o" size="40" color="#1989fa" />
          </view>
          <view class="patient-details">
            <text class="patient-name">{{ record.patientName }}</text>
            <text class="patient-gender">{{ record.gender }}</text>
            <text class="patient-age">{{ record.age }}岁</text>
          </view>
        </view>
        
        <!-- 病情信息 -->
        <view class="condition-info">
          <text class="condition-text">{{ record.condition || '不明' }}</text>
        </view>
        
        <!-- 关联信息 -->
        <view class="related-info">
          <text class="department">{{ record.department }}—{{ record.doctor }}</text>
        </view>
        
        <!-- 咨询信息 -->
        <view class="consultation-info">
          <text class="consultation-type">{{ record.consultationType }}</text>
          <text class="consultation-date">{{ record.consultationDate }}</text>
        </view>
        
        <!-- 使用按钮 -->
        <view class="use-btn" @click="useMedicalRecord(record)">
          <text>使用</text>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="medicalRecords.length === 0" class="empty-state">
        <van-empty description="暂无病情资料" />
      </view>
    </view>
    
    <!-- 底部新建按钮 -->
    <view class="bottom-action">
      <van-button 
        type="primary" 
        size="large" 
        block
        @click="createNewMedicalRecord"
        class="create-record-btn"
      >
        新建病情资料
      </van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 病情资料接口定义
interface MedicalRecord {
  id: number
  patientName: string
  gender: string
  age: number
  condition: string
  department: string
  doctor: string
  consultationType: string
  consultationDate: string
}

// 响应式数据
const medicalRecords = ref<MedicalRecord[]>([])
const doctorId = ref('')
const doctorName = ref('')
const departmentName = ref('')
const consultationPrice = ref(0)
const cardId = ref('')
const cardName = ref('')

// 使用病情资料
const useMedicalRecord = (record: MedicalRecord) => {
  console.log('使用病情资料:', record)
  
  // 跳转到新建病情资料页面，传递现有资料信息
  const url = `/pages/online-consultation/create-medical-record?doctorId=${doctorId.value}&doctorName=${doctorName.value}&departmentName=${departmentName.value}&consultationPrice=${consultationPrice.value}&cardId=${cardId.value}&cardName=${cardName.value}&recordId=${record.id}`
  console.log('跳转URL:', url)
  
  uni.navigateTo({
    url: url
  })
}

// 新建病情资料
const createNewMedicalRecord = () => {
  console.log('新建病情资料')
  
  // 跳转到新建病情资料页面
  const url = `/pages/online-consultation/create-medical-record?doctorId=${doctorId.value}&doctorName=${doctorName.value}&departmentName=${departmentName.value}&consultationPrice=${consultationPrice.value}&cardId=${cardId.value}&cardName=${cardName.value}`
  console.log('跳转URL:', url)
  
  uni.navigateTo({
    url: url
  })
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onLoad((options: Record<string, string>) => {
  console.log('选择病情资料页面 onLoad', options)
  
  doctorId.value = options.doctorId || ''
  doctorName.value = options.doctorName || ''
  departmentName.value = options.departmentName || ''
  consultationPrice.value = parseFloat(options.consultationPrice || '0')
  cardId.value = options.cardId || ''
  cardName.value = options.cardName || ''
  
  console.log('接收到的参数:', {
    doctorId: doctorId.value,
    doctorName: doctorName.value,
    departmentName: departmentName.value,
    consultationPrice: consultationPrice.value,
    cardId: cardId.value,
    cardName: cardName.value
  })
  
  // 加载病情资料
  loadMedicalRecords()
})

// 加载病情资料数据
const loadMedicalRecords = () => {
  // 模拟数据
  medicalRecords.value = [
    {
      id: 1,
      patientName: '周豪',
      gender: '男',
      age: 25,
      condition: '不明',
      department: '骨科',
      doctor: '王林楠',
      consultationType: '线上门诊',
      consultationDate: '2025-08-13'
    }
  ]
  
  // 这里可以从本地存储或API获取病情资料
  const storedRecords = uni.getStorageSync('medicalRecords')
  if (storedRecords) {
    medicalRecords.value = JSON.parse(storedRecords)
  }
}

// 页面显示时刷新数据
onMounted(() => {
  loadMedicalRecords()
})
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.medical-record-list {
  padding: 20rpx;
}

.medical-record-card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  position: relative;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.patient-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  margin-right: 20rpx;
}

.patient-details {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.patient-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.patient-gender, .patient-age {
  font-size: 26rpx;
  color: #666;
}

.condition-info {
  margin-bottom: 20rpx;
}

.condition-text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.related-info {
  margin-bottom: 20rpx;
}

.department {
  font-size: 26rpx;
  color: #666;
}

.consultation-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.consultation-type, .consultation-date {
  font-size: 26rpx;
  color: #666;
}

.use-btn {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  background: #07c160;
  color: white;
  padding: 16rpx 32rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
}

.empty-state {
  padding: 100rpx 0;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  background: white;
  border-top: 1rpx solid #f0f0f0;
}

.create-record-btn {
  background: #1989fa;
  border: none;
  border-radius: 25rpx;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
